<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>menu</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
</head>
<body>

<div id="app">

    <i class="el-icon-circle-plus-outline">添加一级菜单</i>

    <el-tree :data="treeData">

        <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
            <i class="el-icon-circle-plus-outline" @click="addMenu(data)"></i>
            <i class="el-icon-remove-outline" @click="deleteMenu(data)"></i>
            <i class="el-icon-lollipop" @click="editMenu(data)"></i>

        </span>

    </el-tree>


    <el-dialog title="添加菜单" :visible.sync="dialogFormVisible">
        <el-input v-model="formData.name"placeholder="请输入名称"></el-input>
        <el-input v-model="formData.linkUrl"placeholder="请输入地址"></el-input>
        <el-button @click="submitMenu">提交</el-button>
    </el-dialog>
  <!--  <el-dialog title="编辑菜单" :visible.sync="dialogFormVisible4Edit">
        name
        <el-input v-model="formData.name"></el-input>
        linkUrl
        <el-input v-model="formData.linkUrl"></el-input>
        <el-button @click="edit">提交</el-button>
    </el-dialog>-->
    <el-dialog title="编辑菜单" :visible.sync="dialogFormVisible4Edit">
        <!--tab标签页（左右切换效果）-->
        <el-tabs v-model="activeName">
            <el-tab-pane label="菜单信息" name="first">
                <el-input v-model="formData.name"  ></el-input>
                <el-input v-model="formData.linkUrl" ></el-input>

            </el-tab-pane>
            <el-tab-pane label="子菜单信息" name="second">
                <div class="checkScrol">
                    <table>
                        <tr v-for="item in tableData">
                            <td>
                                <input v-model="menuIds" type="checkbox" :value="item.id">
                            </td>
                            <td>{{item.name}}</td>
                            <td>{{item.id}}</td>
                         <!--   <td>{{item.linkUrl}}</td>
                            <td>{{item.description}}</td>-->
                        </tr>
                    </table>
                </div>
            </el-tab-pane>
        </el-tabs>

        <el-button @click="edit">提交</el-button>
    </el-dialog>

</div>

</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<script>

    let vm = new Vue({
        el: "#app",
        data: {
            name: "jack",
            treeData: [],
            formData: {},//页面保存菜单信息遍历
            tableData:[],
            dialogFormVisible: false,
            dialogFormVisible4Edit: false,
            activeName: 'first',
            menuIds:[]

        },
        created() {
            this.queryAll();
        },
        methods: {
            queryAll() {
                /*查询树形控件数据*/
                axios.get("/menu/getAll.do").then((res) => {
                    this.treeData = res.data.data;
                })
            },
            addMenu(data) {
                this.formData={}
                this.formData.parentMenuId = data.id;
                this.dialogFormVisible = true;
            },
            deleteMenu(data) {
                this.$confirm('此操作将永久当前菜单 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/menu/delete.do?id=" + data.id).then((res) => {
                        this.$message({
                            message: res.data.message,
                            type: res.data.flag ? 'success' : 'error'
                        });
                    }).finally(() => {
                        this.queryAll()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            editMenu(data) {
                this.activeName = 'first'
                this.dialogFormVisible4Edit = true
                axios.get("/menu/findMenu.do?id="+data.id).then((res) => {
                this.formData=res.data.data
                    this.tableData=res.data.data.children
                    console.log(res.data.data.children);
                    this.menuIds=res.data.data.menuIds

                })
            },
            submitMenu() {
                // console.log(this.formData);
                axios.post("/menu/add.do", this.formData).then((res) => {
                    this.dialogFormVisible = false;
                    window.opener.location.reload()
                }).finally(() => {
                    this.queryAll();
                })
            },
            edit(){
                // console.log(this.formData);
                this.formData.menuIds=this.menuIds
                axios.post("/menu/edit.do", this.formData).then((res) => {
                    this.dialogFormVisible4Edit = false;

                }).finally(() => {
                    this.queryAll();
                })
            }
        }
    })

</script>
</body>
</html>
